<template>
	<view>
		<view class="box">
			<view>
				<view>昵称：</view>
				<view>{{login.realname}}</view>
			</view>
			<view>
				<view>头像：</view>
				<view>
					<image class="img" v-if="login.avatar == null || login.avatar == ''" src="../../static/78.png" mode=""></image>
					<image class="img" v-else :src="login.avatar" mode=""></image>
				</view>
			</view>
			<view>
				<view>手机号：</view>
				<view>{{login.phone}}</view>
			</view>
		</view>
		<view style="padding: 0 30rpx;box-sizing: border-box;">
			<view class="all_btn" style="margin-top: 100rpx;" @click="qvxiao(1)">修改</view>
		</view>
		<!-- 弹窗 -->
		<view class="bg" v-if="sta == 1">
			<view class="box2">
				<view>
					<view>昵称：</view>
					<input type="text" v-model="realname" value="" placeholder="请输入"/>
				</view>
				<view>
					<view>头像：</view>
					<view @click="uploading()">
						<image v-if="img == ''" class="img" src="../../static/79.png" mode=""></image>
						<image v-if="img != ''" class="img" :src=img mode=""></image>
					</view>
				</view>
				<view class="btn">
					<view class="all_btn"  @click="qvxiao(0)">取消</view>
					<view class="all_btn" @click="btn_type()">确认</view>
				</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				login:'',
				realname:'',
				sta:0,
				img:''
			}
		},
		mounted() {
			this.login = uni.getStorageSync('login')
		},
		methods: {
			qvxiao:function(e){
				this.sta = e
				this.img = this.login.avatar
				this.realname = this.login.realname
			},
			uploading:function(){
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths[0])
						this.img = tempFilePaths[0]
				        uni.uploadFile({
				            url: this.$headUrl + 'sys/common/upload', //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
							header:{
								'X-Access-Token': uni.getStorageSync('token')
							},
				            success: (res) => {
								console.log(res.data)
								if(JSON.parse(res.data).success == true){
									this.img = JSON.parse(res.data).message
								}
				            }
				        });
				    }
				});
			},
			btn_type:function(type){
					this.$post('sys/user/appchangetouxiang',{
						username:this.login.username,
						realname:this.realname,
						avatar:this.img,
					}).then((res)=>{
						if(res.data.success == true){
							uni.showToast({
								title:'修改成功',
								icon:'none'
							})
							let login = uni.getStorageSync('login')
							login.realname = this.realname
							login.avatar = this.img
							console.log(login)
							uni.setStorageSync('login',login)
							this.login = uni.getStorageSync('login')
							this.qvxiao()
						}
					})
			}
		}
	}
</script>

<style>
	.bg{
		width: 100vw; 
		height: 100vh;
		background: rgba(0,0,0,0.3);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.img{
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}
	.box>view>input,.box2>view>input{
		text-align: right;
	}
	.btn>view{
		width: 48%;
	}
	.btn{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 100rpx;
		border: none !important;
	}
	.box>view,.box2>view{
		height: 110rpx;
		border-bottom: 1px solid #F2F2F2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
	}
	.box2{
		width: 90%;
		background:rgba(255,255,255,1);
		box-shadow:0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius:10rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.box{
		background:rgba(255,255,255,1);
		/* box-shadow:0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1); */
		border-radius:10rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.bigbox{
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>
